<template>
  <div class="welcome-wrapper">
    <div class="welcome-message">
      <div class="welcome-icon">
        <Icon name="bar-chart-o" size="48" />
      </div>
      <div class="welcome-text">
        <h2>欢迎使用深度分析</h2>
        <p>我可以帮助您分析文件中的关键内容</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Icon } from 'vant'
</script>

<style lang="scss" scoped>
.welcome-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  .welcome-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    max-width: 100%;
    .welcome-icon {
      margin-bottom: 20px;
      background: linear-gradient(135deg, #4080ff, #a05dee87);
      border-radius: 50%;
      width: 100px;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 16px rgba(64, 128, 255, 0.2);
      
      .van-icon {
        color: white;
      }
    }
    .welcome-text {
      margin-bottom: 30px;
      
      h2 {
        margin-bottom: 8px;
        color: #333;
        font-size: 26px;
        font-weight: 600;
      }
      p {
        color: #666;
        font-size: 16px;
      }
    }
  }
}
</style>
